import { useEffect, useState } from 'react'
import { Button, message, Radio, RadioChangeEvent, Spin } from 'antd'
import './index.less'
import QsfLogin from './components/qsfLogin'
import GYSLogin from './components/gYSLogin'
import OauthLoginIcon from './components/oauthList'
import './index.less'
import DDLogin from './components/ddLogin'
import SliderVerify from '@/components/SliderVerify'
import { useForm } from 'antd/es/form/Form'
interface ApiForm {
  username: string
  password: string
  remember: boolean
}
const Index = () => {
  const [oauthType, setoauthType] = useState('')
  const [loginType, setLoginType] = useState<'QSF' | 'GYS'>('QSF')
  const [sliderSuccess, setSliderSuccess] = useState<boolean>(false)
  const [loading, setLoading] = useState<boolean>(false)
  const code = new URLSearchParams(window.location.search).get('code')
  const authCode = new URLSearchParams(window.location.search).get('authCode')
  const [form] = useForm()
  useEffect(() => {
    if (code && authCode) {
      // setLoading(true)
    }
  }, [])
  const handleSetLoginType = (event: RadioChangeEvent) => {
    form.resetFields()
    setLoginType(event.target.value)
  }
  const onFinish = () => {
    form.validateFields().then((res) => {
      if (!sliderSuccess) {
        message.warning('请进行滑动验证')
        return
      }
      console.log(res, 'res')
    })
  }
  const onSliderSuccess = () => {
    setSliderSuccess(true)
  }
  return (
    <div className="login_page_wrap">
      <div className="login_image_box"></div>
      <div className="flip-card login_info_box">
        <div className="flip-card-inner">
          <div className={'flip-card-front' + (oauthType ? ' show_card' : ' hidden_card')}>
            <div className="login_info_box">
              <div className="login_info_content">
                <div className="login_info_logo">
                  <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
                </div>
                <div className="login_info_title">欢迎登录</div>
                <div className="login_tabs_wrap">
                  <Radio.Group defaultValue="QSF" onChange={handleSetLoginType}>
                    <Radio.Button value="QSF" style={{ flex: 1, textAlign: 'center' }}>
                      七色纺登录
                    </Radio.Button>
                    <Radio.Button value="GYS" style={{ flex: 1, textAlign: 'center' }}>
                      供应商登录
                    </Radio.Button>
                  </Radio.Group>
                </div>
                <div className="login_func_box">
                  {loginType === 'QSF' ? <QsfLogin form={form}></QsfLogin> : <GYSLogin form={form}></GYSLogin>}
                  <SliderVerify onSuccess={onSliderSuccess}></SliderVerify>
                  <Button block type="primary" onClick={onFinish}>
                    登录
                  </Button>
                </div>
                <div className="login_oauth2_box">
                  <div className="login_oauth2_title">其它登录方式</div>
                  <OauthLoginIcon onClick={(val: string) => setoauthType(val)}></OauthLoginIcon>
                </div>
              </div>
            </div>
          </div>
          <div className={'flip-card-back' + (!oauthType ? ' show_card' : ' hidden_card')}>
            {oauthType && <DDLogin onClick={() => setoauthType('')}></DDLogin>}
          </div>
        </div>
      </div>
      <Spin spinning={loading} indicator={<div id="page_loading_login"></div>} fullscreen />
    </div>
  )
}

export default Index
